<template>
  <div>
    <div class="header-home-img">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          class="imgs-title"
          v-for="(item) in listimg"
          :key="item.categoryId"
        >
          <img :src="list.imageHost+item" alt="" />
        </van-swipe-item>
        <!-- <van-swipe-item class="imgs-title">2</van-swipe-item>
        <van-swipe-item class="imgs-title">3</van-swipe-item>
        <van-swipe-item class="imgs-title">4</van-swipe-item> -->
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.srcoll();
  },
  data() {
    return {
      list: [],
      listimg:[]
    };
  },
  methods: {
    async srcoll() {
      const dataId = this.$route.params.id;
      // console.log(dataId);
      const res = await this.$require({
        url: "/product/detail",
        method: "get",
        params: {
          id: dataId,
        },
      });
      if (res.status == 200&&res.data.data.subImages) {
        this.list = res.data.data;
        this.listimg=this.list.subImages.split(',')
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header-home-img {
  position: relative;
  top: 0;
}
// .my-swipe .van-swipe-item {
//     // color: #fff;
//     // font-size: 20px;
//     // line-height: 150px;
//     // text-align: center;
//     // background-color: #39a9ed;
//   }
img {
  width: 375px;
}
</style>